<template>
  <div class="categories-wrapper card-box">
    <router-link
      to="/categories/"
      class="title iconfont icon-wenjianjia"
      title="全部分类"
      >{{ length === "all" ? "全部分类" : "文章分类" }}</router-link
    >

    <div class="categories">
      <router-link
        :to="`/categories/?category=${encodeURIComponent(item.key)}`"
        v-for="(item, index) in categories"
        :key="index"
        :class="{ active: item.key === category }"
      >
        {{ item.key }}
        <span :style="styleList[index]">{{ item.length }}</span>
      </router-link>
      <router-link
        to="/categories/"
        v-if="length !== 'all' && length < categoriesData.length"
        class="more"
        >更多 ...</router-link
      >
    </div>
  </div>
</template>

<script>
export default {
  props: {
    category: {
      type: String,
      default: ''
    },
    categoriesData: {
      type: Array,
      default: []
    },
    length: {
      type: [String, Number],
      default: 'all'
    }
  },
  data() {
    return {
      styleColors: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
      styleList: []
    }
  },
  computed: {
    categories() {
      if (this.length === 'all') {
        return this.categoriesData
      } else {
        return this.categoriesData.slice(0, this.length)
      }
    }
  },
  created() {
    for (let i = 0, lg = this.categories.length; i < lg; i++) {
      this.styleList.push(this.getStyleColors())
    }
  },
  methods: {
    getStyleColors() {
      const styleColors = this.styleColors
      const randomColor = styleColors[Math.floor(Math.random() * styleColors.length)]
      return `background: ${randomColor};--randomColor:${randomColor};`
    }
  }
}
</script>

<style lang='stylus'>
.categories-wrapper {
  .title {
    color: var(--textColor);
    opacity: 0.9;
    font-size: 1.1rem;
    padding: 0 0.95rem;
    font-weight: bold;

    &::before {
      margin-right: 0.3rem;
      font-size: 1.2rem;
    }
  }

  .categories {
    margin-top: 0.6rem;

    a {
      display: block;
      padding: 8px 0.5rem 7px 0.5rem;
      color: var(--textColor);
      opacity: 0.8;
      font-size: 1rem;
      line-height: 1.4rem;
      position: relative;
      transition: all 0.2s;
      border-left: 2px solid transparent;
      border-bottom: 1px solid var(--borderColor);
      margin-top: -1px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;

      @media (max-width: $MQMobile) {
        font-weight: 400;
      }

      &.more {
        // color $accentColor
      }

      &:not(.active):hover {
        color: $accentColor;
        background: #f8f8f8;
        border-color: $accentColor;

        span {
          opacity: 0.8;
        }
      }

      span {
        float: right;
        // background-color: var(--textColor);
        color: #ffffff;
        border-radius: 0.25rem;
        width: 1.4rem;
        height: 1.4rem;
        font-size: 0.6rem;
        text-align: center;
        transition: opacity 0.3s;
        font-family: Georgia !important;
      }

      &.active {
        background: $accentColor;
        color: var(--mainBg);
        padding-left: 0.8rem;
        border-radius: 1px;
        border-color: transparent;
      }
    }
  }
}

.theme-mode-dark .categories-wrapper .categories a:not(.active):hover, .theme-mode-read .categories-wrapper .categories a:not(.active):hover {
  background: var(--customBlockBg);
}
</style>
